init();
//初始化
function init(){

    // 自定义组件 注册world组件
    surfaceForm.component({
        name: 'page',
        component: {
            name: 'page',
            props: {
                label: String,
                prop: String,
                value: [String],
                model: Object,
                url: String,
                text:{
                    type: String,
                    default: ''
                },
            },
            data() {
                return {
                    dialogShow: false,
                    optionData: [],
                    only: false
                }
            },
            render(h) {
                const cw = document.documentElement.clientWidth,
                    ch = document.documentElement.clientHeight,
                    fullscreen = cw < 850,
                    dialogW = cw > 1200 ? cw > 1500 ? '80%' : "85%" : "90%",
                    iframeH = fullscreen ? (ch - 131) + "px" : "calc(85vh - 40px)"
                const iframeId = this.prop + '_iframe_' + new Date().getTime()
                console.log(this.text)
                return h('div', {}, [
                    h('el-button', {
                        props: {'type':'primary', size: 'mini' },
                        on: {
                            click: () => {
                                this.dialogShow = true
                            }
                        }
                    },this.text ? this.text : null),
                    h("el-dialog", {
                        props: {
                            visible: this.dialogShow,
                        },
                        attrs: {
                            modal: false,
                            width: dialogW,
                            fullscreen: fullscreen,
                            "top": '3vh',
                            "append-to-body": true,
                            'destroy-on-close': false,
                            'close-on-press-escape': true,
                            'close-on-click-modal': true,
                            'show-close': true,
                        },
                        on: {
                            close: () => {
                                this.dialogShow = false
                            },
                        }
                    }, [
                        h("iframe", {
                            attrs: {
                                src: this.url,
                                width: "100%",
                                frameBorder: 0,
                                id: iframeId
                            },
                            style: {
                                height: iframeH,
                                border: "0 none"
                            }
                        }),
                        h("div", {slot: "title"}, [
                            h("span", [this.label]),
                        ]),
                    ])
                ])

            }
        }
    })


    const template_tree = `
    <div >
        <el-tree
          :data="options"
          :default-expand-all="true"
          :show-checkbox="true"
          :node-key="nodeKey"
          :default-checked-keys="value.value"
          @check="handleNodeClick"
          :current-node-key="checked_ids"
          :check-strictly="true"
          >
        </el-tree>
        
    </div>
    `;

    const compiledTemplate_tree = Vue.compile(template_tree);

    surfaceForm.component({
        name: 'ba_tree',
        component: {
            name: 'ba_tree',
            props: {
                value: {
                    type: [Array],
                    default() {
                        return []
                    }
                },
                options: {
                    type: Array,
                    default() {
                        return []
                    }
                },
                checked_ids: {
                    type: Array,
                    default() {
                        return []
                    }
                },

                nodeKey:{
                    type: String,
                    default() {
                        return "id"
                    }
                }
            },
            created(){

            },
            data() {
                return{
                    data:this.value.value
                }
            },
            methods: {
                handleNodeClick(data,value){
                    this.value.value = value.checkedKeys;
                    this.data = value.checkedKeys;
                    console.log(this.value)
                }
            },

            render(h){

                return compiledTemplate_tree.render.call(this, h);
            },

        },
    })



    const template_map = `
    <div >
        <el-row :gutter="20">
          <el-col :span="8"><el-input v-model="data.long" placeholder="精度"></el-input></el-col>
          <el-col :span="8"><el-input v-model="data.lat" placeholder="纬度"></el-input></el-col>
          <el-col :span="4">
            <el-button @click="initMap" type="primary" >
              地图选择
            </el-button>
        </el-col>
        </el-row>
        
        
        
        

        <el-dialog
          title="提示"
          :visible.sync="drawer"
          width="80%"
          height="500px"
          >
          
          <div id="container" style="
            height: 500px;
            position: absolute;
            left: 0;
            top: 50px;
            right: 0;
            bottom: 0;
          "></div>
          <div class="confirm"
            style="
                position: absolute;
                bottom: 30px;
                right: 4%;
                z-index: 99;
                height: 50px;
                width: 50px;
                line-height: 50px;
                font-size: 15px;
                text-align: center;
                background-color: white;
                background: #1ABC9C;
                color: white;
                border: none;
                cursor: pointer;
                border-radius: 50%;
                top: 93px;
            "
           @click="choose">确定</div>
          
          
        </el-dialog>

       
    </div>
    `;

    const compiledTemplate_map = Vue.compile(template_map);

    surfaceForm.component({
        name: 'ba_map',
        component: {
            name: 'ba_map',
            props: {
                value: {
                    type: [Array],
                    default() {
                        return []
                    }
                }


            },
            created(){
            },
            data() {
                return{
                    drawer: false,
                    data:this.value,
                    location:null,
                }
            },
            methods: {
                choose(){
                    this.drawer = false
                    if(!this.location){
                        return;
                    }

                    this.data.long = this.location.lng;
                    this.data.lat = this.location.lat;

                },
                initMap(){
                    this.drawer = true
                    var map, marker, geocoder, infoWin, searchService, address = null;
                    var that = this;
                    var init = function () {

                        var center = new qq.maps.LatLng(that.data.lat, that.data.long);
                        map = new qq.maps.Map(document.getElementById('container'), {
                            center: center,
                            zoom: parseInt(12)
                        });
                        //初始化marker
                        initmarker(center);

                        //实例化信息窗口
                        infoWin = new qq.maps.InfoWindow({
                            map: map
                        });
                        geocoder = new qq.maps.Geocoder({
                            complete: function (result) {
                                infoWin.open();
                                address = result.detail.addressComponents.province +
                                    result.detail.addressComponents.city +
                                    result.detail.addressComponents.district;
                                if (result.detail.addressComponents.streetNumber == '') {
                                    address += result.detail.addressComponents.street;
                                } else {
                                    address += result.detail.addressComponents.streetNumber;
                                }
                                infoWin.setContent(address);
                                infoWin.setPosition(result.detail.location);
                            }
                        });
                        //显示当前marker的位置信息窗口
                        geocoder.getAddress(center);

                        var latlngBounds = new qq.maps.LatLngBounds();
                        //查询poi类信息
                        searchService = new qq.maps.SearchService({
                            complete: function (results) {
                                var pois = results.detail.pois;
                                for (var i = 0, l = pois.length; i < l; i++) {
                                    var poi = pois[i];
                                    latlngBounds.extend(poi.latLng);
                                    initmarker(poi.latLng);
                                    //显示当前marker的位置信息窗口
                                    geocoder.getAddress(poi.latLng);
                                }
                                map.fitBounds(latlngBounds);
                            }
                        });
                        //实例化自动完成
                        var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
                        //添加监听事件
                        qq.maps.event.addListener(ap, "confirm", function (res) {
                            searchKeyword();
                        });
                        qq.maps.event.addListener(
                            map,
                            'click',
                            function (event) {
                                try {
                                    infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>');
                                    var latLng = event.latLng,
                                        lat = latLng.getLat().toFixed(5),
                                        lng = latLng.getLng().toFixed(5);
                                    var location = new qq.maps.LatLng(lat, lng);
                                    //调用获取位置方法
                                    geocoder.getAddress(location);
                                    infoWin.setPosition(location);
                                    marker.setPosition(location);
                                    that.location = location;
                                } catch (e) {
                                    console.log(e);
                                }
                            }
                        );
                    };

                    //实例化marker和监听拖拽结束事件
                    var initmarker = function (latLng) {
                        marker = new qq.maps.Marker({
                            map: map,
                            position: latLng,
                            draggable: true,
                            title: '拖动图标选择位置'
                        });
                        //监听拖拽结束
                        qq.maps.event.addListener(marker, 'dragend', function (event) {
                            var latLng = event.latLng,
                                lat = latLng.getLat().toFixed(5),
                                lng = latLng.getLng().toFixed(5);
                            var location = new qq.maps.LatLng(lat, lng);
                            //调用获取位置方法
                            geocoder.getAddress(location);
                        });
                    };
                    var close = function (data) {
                        var index = parent.Layer.getFrameIndex(window.name);
                        var callback = parent.$("#layui-layer" + index).data("callback");
                        //再执行关闭
                        parent.Layer.close(index);
                        //再调用回传函数
                        if (typeof callback === 'function') {
                            callback.call(undefined, data);
                        }
                    };

                    //执行搜索方法
                    var searchKeyword = function () {
                        searchService.clear();//先清除
                        marker.setMap(null);
                        infoWin.close();
                        var keyword = $("#place").val();
                        searchService.setLocation("");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
                        searchService.setPageIndex(0);//设置检索的特定页数。
                        searchService.setPageCapacity(1);//设置每页返回的结果数量。
                        searchService.search(keyword);//开始查询
                    };

                    // //点击确定后执行回调赋值
                    // $(document).on('click', '.confirm', function () {
                    //     var as = marker.getPosition();
                    //     var x = as.getLat().toFixed(5);
                    //     var y = as.getLng().toFixed(5);
                    //     var zoom = map.getZoom();
                    //     var data = {lat: x, lng: y, zoom: zoom, address: address};
                    //     close(data);
                    // });
                    //
                    // //点击搜索按钮
                    // $(document).on('click', '#search-btn', function () {
                    //     if ($("#place").val() == '')
                    //         return;
                    //     searchKeyword();
                    // });

                    setTimeout(function (){
                        init();
                    },200)
                },
            },

            render(h){

                return compiledTemplate_map.render.call(this, h);
            },

        },
    })
}



